<template>
    <div >
		<ArtRuleTable :fetch-data="fetchUserData" :autoLoad="true" :custom-formatters="customFormatters"></ArtRuleTable>
    </div>
</template>

<script setup lang="ts">
	import { h } from 'vue'
	import { ElDialog, FormInstance, ElTag } from 'element-plus'
	import { ElMessageBox, ElMessage } from 'element-plus'
	import dayjs from 'dayjs';
	import { onMounted} from 'vue-demi'
	import ArtRuleTable from '@/components/custom/table/ArtRuleTable.vue'
	import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
	import { RuleService } from '@/api/data-rule/ruleApi'
	import { ref } from 'vue-demi';
	
	const fetchUserData = async (): Promise<any[]> => {
	  return RuleService.getLoadAll({});
	}
	
	const customFormatters = {
	  operate: (_value:any,row:any) => {
	    return h('div', [
	      h(ArtButtonTable, {
	        type: 'edit',
	        onClick: () => openDialog('edit', row)
	      }),
	      h(ArtButtonTable, {
	        type: 'delete',
	        onClick: () => deleteUser(row)
	      })
	    ])
	  }
	}
	
	const openDialog=(_type:string,row:any)=>{
		console.log(row);
	}
	
	const deleteUser=(row:any)=>{
		console.log(row);
	}
	
	onMounted(async () => {
	});
</script>

<style lang="scss" scoped>
  .account-page {
    :deep(.user) {
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 6px;
      }

      > div {
        margin-left: 10px;

        .user-name {
          font-weight: 500;
          color: var(--art-text-gray-800);
        }
      }
    }
  }
</style>
